<template>
    <div>
        <!-- <a-row v-if="visible" :style="style" class="contextmenu">
            <a-col :span="12">
                <a-button>当日预定</a-button>
            </a-col>
            <a-col :span="12">
                <a-button>散客留房</a-button>
            </a-col>
        </a-row> -->
        <a-menu :style="style" class="contextmenu" v-if="visible" @click="handleClick">
            <a-menu-item key="DRYD" style="border: 1px solid #ccc; margin: 0;">
                <a-icon type="clock-circle" />
                <span>当日预定 {{ this.room.roomCode }}</span>
            </a-menu-item>
            <a-menu-item key="SKLF" style="border: 1px solid #ccc; margin: 0;">
                <a-icon type="clock-circle" />
                <span>散客留房 {{ this.room.roomCode }}</span>
            </a-menu-item>
            <a-menu-item :key="3" style="border: 1px solid #ccc; margin: 0;">
                <span>散客登记</span>
            </a-menu-item>
            <a-menu-item :key="4" style="border: 1px solid #ccc; margin: 0;">
                <span>{{ room.id }}</span>
            </a-menu-item>
        </a-menu>
        <DangRiYuDingModal ref="dangriyudingModal" />
        <SanKeLiuFangModal ref="sankeLiuFangModal" />
    </div>
</template>

<script>
import DangRiYuDingModal from './DangRiYuDing/modules/DangRiYuDingModal'
import SanKeLiuFangModal from './SanKeLiuFang/SanKeLiuFangModal'

export default {
    name: "RoomContextMenu",
    components: {
        DangRiYuDingModal,
        SanKeLiuFangModal
    },
    data() {
        return {
            left: 0,
            top: 0,
            target: null,
            selectedKeys: [],
            timer: null,
            room: null
        }
    },
    props: {
        visible: {
            type: Boolean,
            required: false,
            default: false
        },
    },
    computed: {
        style() {
            return {
                left: this.left + 'px',
                top: this.top + 'px'
            }
        }
    },
    created() {
        window.addEventListener('mousedown', e => this.closeMenu(e))
        window.addEventListener('contextmenu', e => this.setPosition(e))
    },
    beforeDestroy() {
        this.timer = null
    },
    methods: {
        closeMenu(e) {
            if (this.visible === true) {
                this.timer = setTimeout(() => {
                    this.$emit('update:visible', false)
                }, 200)
            }
        },
        setPosition(e) {
            this.left = e.clientX
            this.top = e.clientY
            this.target = e.target
        },
        handleClick({ key }) {
            if (key === 'DRYD') {
                this.$refs.dangriyudingModal.add(this.room);
                this.$refs.dangriyudingModal.title = "当日预定房间：" + this.room.roomCode;
                this.$refs.dangriyudingModal.disableSubmit = false;
            }
            if (key === 'SKLF') {
                this.$refs.sankeLiuFangModal.add(this.room);
                this.$refs.sankeLiuFangModal.title = "散客留房：" + this.room.roomTypeCode_dictText + ' ' + this.room.roomCode;
                this.$refs.sankeLiuFangModal.disableSubmit = false;
            }
            // this.$emit('select', key, this.target)
            this.$emit('update:visible', false)
        }
    }
}
</script>

<style lang="less" scoped>
.contextmenu {
    position: fixed;
    z-index: 1;
    border: 1px solid #9e9e9e;
    border-radius: 4px;
    box-shadow: 2px 2px 10px #aaaaaa !important;
}
</style>